<template>
  <div class="container long-container">
    <div class="row">
      <!-- 新闻详情   START -->
      <div class="col-md-8 long-left" id="long-left">
        <blockquote>
          <h2>{{ newsdetail.title }}</h2>
        </blockquote>
        <img :src="newsdetail.imgUrl" alt="新闻详情" />
        <div class="content-list" v-for="(c,index) in newsdetail.content" :key="c.contentId">
          <h4>
            {{c.contentTitle}}
          </h4>
          <p>
            {{c.contentText}}
          </p>
        </div>
        <span class="date">{{ newsdetail.releaseDate }}</span>
      </div>
      <!-- 新闻详情   END -->

      <!-- 新闻推荐   START -->
      <transition name="newsRecommended" appear class="animate__animated" enter-active-class="animate__fadeInRight">
        <div class="col-md-4 long-right">
          <div class="recommended" v-for="nr in newsRecommended" :key="nr.id" @click="goRecommended(nr)">
            <img :src="nr.imgUrl" alt="公司新闻" />
            <div class="textarea">
              <p class="date">{{ nr.releaseDate }}</p>
              <h3 class="title">
                {{ nr.title }}
              </h3>
            </div>
          </div>
          <button class="backList" @click="backNewsList">返回列表</button>
        </div>

      </transition>
      <!-- 新闻推荐   END -->
    </div>
  </div>
</template>

<script>
  import { onMounted, computed, reactive } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { useNewsStore } from "../../../store/news"  //引入news仓库
  import { storeToRefs } from 'pinia'  //引入方法让仓库里的值可以解构赋值并且具有响应式
  export default {
    name: "NewsDetails",
    setup() {
      const store = useNewsStore();
      const router = useRouter()
      const route = useRoute();
      onMounted(() => {
        //通知vuex发送请求获取新闻推荐的数据
        store.getNewsRecommended()
      });
      //数据
      //声明一个变量来接受新闻列表传过来的query参数包含 title、imgUrl、content、releaseDate 这四个参数

      let newsdetail = reactive({

        title: route.query.title,
        imgUrl: route.query.imgUrl,
        content: [...JSON.parse(route.query.content)],
        releaseDate: route.query.releaseDate,
      });
      //接受新闻推荐的数据
      let { newsRecommended } = storeToRefs(store)
      //方法
      //点击新闻推荐是修改页面数据
      function goRecommended(nr) {
        //滚动到详情位置.
        let goDetailTop = document.getElementById('long-left')
        goDetailTop.scrollIntoView({
          behavior: "smooth",//平滑滚动
          block: 'start', //将指定位置滚动到页面中间
        })

        newsdetail.title = nr.title;
        newsdetail.imgUrl = nr.bigImgUrl;
        newsdetail.content = nr.content;
        newsdetail.releaseDate = nr.releaseDate;
      }
      //跳转新闻列表
      function backNewsList() {
        router.push("/news")
      }
      return {
        newsdetail,
        newsRecommended,
        goRecommended,
        backNewsList
      };
    },
  };
</script>

<style scoped>
  .long-container {
    margin-top: 40px;
    margin-bottom: 60px;
  }

  /* 左侧详情样式  START */
  .long-container .long-left {
    padding: 20px 20px;
  }

  .long-container .long-left blockquote h2 {
    font-family: "Source Han Sans CN";
    font-size: 30px;
    font-weight: bold;
    color: #333333;
    margin-left: 20px;
    margin-bottom: 10px;
  }

  .long-container .long-left img {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .long-container .long-left .content-list {
    word-break: break-all;
    word-wrap: break-word;
    margin: 10px 0px 20px;
  }

  .long-container .long-left .content-list h4 {
    font-family: "Source Han Sans CN";
    font-size: 15px;
    color: #555;
    font-weight: bold;
    line-height: 22px;
    text-align: justify;
    margin-bottom: 10px;
  }

  .long-container .long-left .content-list p {
    font-family: "Source Han Sans CN";
    font-size: 15px;
    color: #999999;
    line-height: 22px;
    text-align: justify;
  }

  .long-container .long-left .date {
    background-color: #DCE1EE;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 3px;
    color: #999999;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
  }

  /* 左侧详情样式  END */

  /* 右侧推荐样式  START */
  .long-container .long-right {
    margin-top: 50px;
  }

  .long-container .long-right .recommended {
    border-bottom: 1px solid #eeeeee;
    height: 100px;
    margin-top: 43px;
    user-select: none;
    cursor: pointer;
    transition: transform 0.2s linear;
  }

  .long-container .long-right .recommended:hover {
    box-shadow: 0px 1.2px 1.2px -4px rgba(0, 0, 0, 0.016),
      0px 4px 4px -4px rgba(0, 0, 0, 0.024),
      0px 18px 18px -4px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
  }

  .long-container .long-right .recommended img {
    height: 80px;
    width: 80px;
  }

  .long-container .long-right .recommended .textarea {
    font-family: "Source Han Sans CN";
    margin-left: 100px;
    position: relative;
    top: -80px;
  }

  .long-container .long-right .recommended .textarea .date {
    font-size: 14px;
    font-weight: 500;
    color: #999999;
    text-align: right;
    margin-bottom: 10px;
  }

  .long-container .long-right .recommended .textarea .title {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #999;
    display: inline-block;
    word-break: break-all;
    /* 文本超出两行显示省略号 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
    overflow: hidden;
  }

  .long-container .long-right .backList {
    background-color: #fff;
    font-family: "Source Han Sans CN";
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    color: #999;
    width: 100%;
    height: 50px;
    margin: 30px 0px 0px;
    transition: all 0.2s linear;
  }

  .long-container .long-right .backList:hover {
    background-color: #4F68AC;
    color: #fff;
    border: none;
  }

  /* 右侧推荐样式  END */

  /* 设置响应式 */
  /* 移动端 */
  @media (max-width: 992px) {
    .long-container .long-right .recommended {
      padding: 0;
    }
  }

  /* PC端 */
  @media (min-width: 992px) {
    .long-container .long-right .recommended {
      padding: 0 0 0 20px;
    }
  }
</style>